<template>
  <div class="home">
    <!-- 导航 -->
    <top-bar :navList="navList" @post="getSelected"></top-bar>
    <!-- main -->
    <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" ref="loadmore" >
      <!-- swiper -->
      <swiper />
      <!-- list -->
      <div class="list">
        <h2 class="titH2">{{channel}}更新</h2>
        <!-- list -->
        <div v-if="selected == 0 "><small-list :conList="conList"  /></div>
        <div class="s" v-else><small-list :conList="conList" /></div>
      </div>
    </mt-loadmore>
  </div>

</template>
<script>
import { Loadmore } from 'mint-ui'
import TopBar from '@/components/TopBar'
import Swiper from '@/components/Swiper'
import SmallList from '@/components/SmallList'

let conList = [
  {
    vid: 0,
    img: 'http://puui.qpic.cn/tv/0/57609315_1080607/0',
    time: '05:15,33',
    title: '001误吸仙气的马乐被告知世界正在崩溃边缘…'
  },
  {
    vid: 1,
    img: 'http://puui.qpic.cn/tv/0/57609315_1080607/0',
    time: '05:15,33',
    title: '误220吸仙气的马乐被告知世界正在崩溃边缘…'
  },
  {
    vid: 2,
    img: 'http://puui.qpic.cn/tv/0/57609315_1080607/0',
    time: '05:15,33',
    title: '误吸仙222气的马乐被告知世界正在崩溃边缘…'
  }
]

export default {
  data () {
    return {
      selected: 0,
      allLoaded: false,
      navList: ['最新', '国产', '日韩', '动漫', '欧美', '同性'],
      conList
    }
  },
  created () {
    this.channel = this.navList[0]
    let promise = this.$http('/BBM54PGAwangning/0-8.html', {})
    promise.then(res => {
      console.log(res)
    })
  },
  methods: {
    loadBottom () {
      // console.log('到达底部')
    },
    getSelected (e) {
      this.selected = e
      this.channel = this.navList[e]
    }
  },
  components: {
    mtLoadmore: Loadmore,
    TopBar,
    Swiper,
    SmallList
  }
}
</script>
<style lang='less'>
 .home { padding-top:60px;}
 .home .mint-loadmore { margin-top:10px;}

 .home .list {
   padding: 0 12px;
   img { display: block;}
    .titH2 { font-size: 24px; color: #463963;  line-height: 2em;}
   .s {
      .smallList {
      display: flex; justify-content: space-between; flex-wrap: wrap;
      li { width: 49.2%; }
    }
   }
  }

</style>
